<template>
  <el-form ref="advantageForm" :model="eAdvantage" :rules="eAdvantageRules" label-width="120px" class="demo-ruleForm" size="default" status-icon>
    <p style="font-size: 24px;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-left: 20px;">公司优势</p>
    <el-form-item label="公司优势" prop="advantage">
      <el-select v-model="eAdvantage.advantage" multiple placeholder="请选择" style="width: 400px" size="large" :clearable="true" :filterable="true" :allow-create="true">
        <el-option v-for="item in advantages" :key="item.value" :label="item.label" :value="item.value"  />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="saveInfo(advantageForm)">保存</el-button>
      <el-button @click="cancelEdit(advantageForm)">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang='ts' setup>
import { defineComponent, reactive, ref, computed, onMounted, getCurrentInstance } from 'vue'
import { getAddressCode, getAddressText, elmessage, data } from "@/hook/hook"
import type { FormInstance, FormRules } from 'element-plus'
import { useStore } from "vuex"
import { advantages } from "@/utills/data"
import {eAdvantage,eAdvantageRules} from "@/utills/enterpriseValidators"


const advantageForm = ref<FormInstance>()
// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例

const store = useStore()

onMounted(()=>{
  eAdvantage.advantage=store.state.enterpriseState.EAdvantage
})

// 提交按钮
const saveInfo = async (formEl: FormInstance | undefined) => {

  
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      store.commit("editEAdvantage")
      store.commit("upEAvantage",eAdvantage.advantage)
      
      
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 取消按钮
function cancelEdit(formEl: FormInstance | undefined) {
  if (!formEl) return

  formEl.resetFields()
  store.commit("editEAdvantage")

}


</script>
<style scoped>
.demo-ruleForm {
  height: 300px;
}

.demo-ruleForm:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}
</style>